<!-- @format -->

<template>
  <div class="dialog-confirm-example">
    <h2 class="title">通用确认弹框示例</h2>

    <div class="button-group">
      <comp-button @click="showDefaultDialog" text="默认弹框" />
      <comp-button @click="showBasicDialog" text="基础确认弹框" />
      <comp-button @click="showSuccessDialog" text="成功提示弹框" />
      <comp-button @click="showWarningDialog" text="警告提示弹框" />
      <comp-button @click="showErrorDialog" text="错误提示弹框" />
      <comp-button @click="showCustomDialog" text="自定义内容弹框" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import CompButton from '@/components/comp-button.vue';
  import DialogConfirm from './index';

  // 显示默认确认弹框
  const showDefaultDialog = () => {
    DialogConfirm({
      title: '操作确认',
      message: '您确定要执行此操作吗？',
      subMessage: '此操作执行后将无法撤销',
      onConfirm: () => {
        console.log('用户点击了确认按钮');
      },
      onCancel: () => {
        console.log('用户点击了取消按钮');
      },
    });
  };
  // 显示基础确认弹框
  const showBasicDialog = () => {
    DialogConfirm({
      title: '操作确认',
      type: 'info',
      message: '您确定要执行此操作吗？',
      subMessage: '此操作执行后将无法撤销',
      onConfirm: () => {
        console.log('用户点击了确认按钮');
      },
      onCancel: () => {
        console.log('用户点击了取消按钮');
      },
    });
  };

  // 显示成功提示弹框
  const showSuccessDialog = () => {
    DialogConfirm({
      title: '操作成功',
      message: '您的操作已成功完成',
      type: 'success',
      iconClass: 'el-icon-success',
      confirmButtonText: '知道了',
      showCancelButton: false,
      onConfirm: () => {
        console.log('用户确认了成功提示');
      },
    });
  };

  // 显示警告提示弹框
  const showWarningDialog = () => {
    DialogConfirm({
      title: '操作警告',
      type: 'warning',
      message: '此操作可能会导致数据丢失',
      subMessage: '请确认您已备份重要数据',
      iconClass: 'el-icon-warning',
      confirmButtonText: '继续操作',
      cancelButtonText: '取消操作',
      onConfirm: () => {
        console.log('用户确认继续操作');
      },
      onCancel: () => {
        console.log('用户取消了操作');
      },
    });
  };

  // 显示错误提示弹框
  const showErrorDialog = () => {
    DialogConfirm({
      title: '操作失败',
      type: 'error',
      message: '很抱歉，操作执行失败',
      subMessage: '请稍后重试或联系客服',
      iconClass: 'el-icon-error',
      confirmButtonText: '重试',
      cancelButtonText: '关闭',
      onConfirm: () => {
        console.log('用户选择重试');
        // 这里可以重新执行之前的操作
      },
      onCancel: () => {
        console.log('用户关闭了错误提示');
      },
    });
  };

  // 显示自定义内容弹框
  const showCustomDialog = () => {
    // 创建一个包含自定义内容的div元素
    const customContent = document.createElement('div');
    customContent.innerHTML = `
      <div style="padding: 10px 0;">
        <div style="margin-bottom: 15px; font-weight: bold;">请确认以下信息：</div>
        <ul style="padding-left: 20px; margin: 0;">
          <li style="margin-bottom: 8px;">订单号：ORD20230615001</li>
          <li style="margin-bottom: 8px;">商品名称：高级定制皮鞋</li>
          <li style="margin-bottom: 8px;">价格：¥1,299.00</li>
          <li style="margin-bottom: 8px;">收货地址：北京市朝阳区...</li>
        </ul>
      </div>
    `;

    // 创建弹框并设置自定义内容
    const dialog = DialogConfirm({
      title: '订单确认',
      message: '',
      showIcon: false,
      confirmButtonText: '确认订单',
      cancelButtonText: '返回修改',
      onConfirm: () => {
        console.log('用户确认了订单');
      },
      onCancel: () => {
        console.log('用户返回修改订单');
      },
    });

    // 将自定义内容添加到弹框中
    setTimeout(() => {
      const messageEl = document.querySelector('.dialog-confirm-message');
      if (messageEl) {
        messageEl.appendChild(customContent);
      }
    }, 0);
  };
</script>

<style lang="scss" scoped>
  .dialog-confirm-example {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  .title {
    font-size: 24px;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
  }

  .button-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  @media screen and (max-width: 768px) {
    .button-group {
      flex-direction: column;
      align-items: center;
    }
  }
</style>
